import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom';

// import 'font-awesome/css/font-awesome.min.css';
// import smile from './../public/img/smile.gif';
import './index.scss';

class A extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <Switch>
                    {/* exact 完全匹配 */}
                    <Route exact path={`${this.props.match.path}`} render={(route) => { 
                        return (
                            <div>Component A, No ID</div>
                        )
                    }}></Route>
                    <Route path={`${this.props.match.path}/sub`} render={(route) => { 
                        return (
                            <div>Component A Sub</div>
                        )
                    }}></Route>
                    <Route path={`${this.props.match.path}/:id`} render={(route) => { 
                        return (
                            <div>Component A, ID is {route.match.params.id}</div>
                        )
                    }}></Route>
                </Switch>
            </div>
        )
    }
}
class B extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                Component B
            </div>
        )
    }
}
class Wrapper extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <Link to="/a">组件A</Link>
                <br />
                <Link to="/a/sub">组件A/sub</Link>
                <br />
                <Link to="/a/123">组件A/123</Link>
                <br />
                <Link to="/b">组件B</Link>
                {this.props.children}
            </div>
        )
    }
}

ReactDOM.render(
    <Router>
        <Wrapper>
            <Route path="/a" component={A}/>
            <Route path="/b" component={B}/>
        </Wrapper>
    </Router>,
    document.getElementById("root")
);
